import React, { FC, useState, useEffect } from 'react'
// 碳排放
import $axios from '@/utils/axios'
import { Select,Radio, Dropdown, Menu, Space, Input  } from 'antd'
import Dynamic from '@/api/dynamic'
import './DefineSelectComp.less'
import { DownOutlined, EditOutlined } from '@ant-design/icons'
const { Option } = Select
interface TableDefinedRadioProps {
    api_id: string;
    key_label:string;
    key_value:string;
    value: string;
    param: Object;
    mode: string;
    canDedined:Boolean,
    placeholder: string;
    onChange?: (arg0: unknown) => void;
}
const TableDefinedRadio: FC<TableDefinedRadioProps> = (props: TableDefinedRadioProps) => {
    const [list, setList] = useState([]);
    const [showObj,setshowObj] = useState({});
    const [fiedlvalue,setfiedlvalue] = useState('');
    const {
        api_id,
        key_label = 'label',
        key_value = 'value',
        value = '',
        param = {},
        mode='',
        placeholder="",
        canDedined = false,
        onChange = () => {},
    } = props
    const handerChange = (e) => {
        // console.log(val);
        onChange(e)
    }
    const getList = ()=>{
       if(api_id){
            Dynamic.getDynamicQuery({
                apiID:api_id,
                'apiParam':param
              }).then((res) => {
                let data = res?.data?.data||[]
                let obj = {};
                data.map((e)=>{
                    obj[e[key_value]] = e[key_label]
                })
                setshowObj(obj)
                setList(data);
            })
        }
    }
    useEffect(()=>{
        if(value){
            getList()
        }
    },[value])
    const menu = (
        <Menu className='DefineSelectCompMenu'>
             <Menu.Item onClick={()=>{
                    handerChange('')
                    // e.preventDefault();
                }}>&nbsp;&nbsp;&nbsp;</Menu.Item>
            {
                canDedined&&<Menu.Item onClick={()=>{
                    handerChange(fiedlvalue)
                    // e.preventDefault();
                }}><Input onClick={(e)=>{
                    e.stopPropagation();
                }} value={fiedlvalue} onChange={(e)=>{
                    setfiedlvalue(e.target.value)
                }}/></Menu.Item>
            }
            
             {list.map((item) => (
                // <Option value={item[key_value]}></Option>
                <Menu.Item onClick={()=>{
                    handerChange(item[key_value])
                    // e.preventDefault();
                }}>{item[key_label]}</Menu.Item>
            ))}

        </Menu>
      );
    return <div>
        {/* {
            mode==''?<Select value={value} style={{minWidth:'150px'}} allowClear onChange={handerChange}>
            {list.map((item) => (
                <Option value={item[key_value]}>{item[key_label]}</Option>
            ))}
            </Select>:<Select mode="multiple" value={value} style={{minWidth:'150px'}} allowClear onChange={handerChange}>
        {list.map((item) => (
            <Option value={item[key_value]}>{item[key_label]}</Option>
        ))}
        </Select>
        } */}
        <Dropdown overlay={menu}  trigger={['click']}>
        <div className='DefineSelectCompwrap' onClick={()=>{
                    getList();
                }}>
            <div className='DefineSelectComValue'>{value?(showObj[value]||value):<span className='placeholder'>{placeholder}</span>}</div>
            <div className='DefineSelectComEdit' >
               
                
                    {/* <EditOutlined /> */}
                    <DownOutlined style={{color:value?'#333':'#ccc'}}/>
                
            </div>
        </div>
        </Dropdown>
    </div>
        
}

TableDefinedRadio.defaultProps = {
    "api_id": "",
    "key_label":"",
    "key_value":"",
    "value": "",
    "param":{},
    "mode":"",
    "placeholder":"",
    "canDedined":false,
}
export default TableDefinedRadio





